<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS_postion定位</title>
    <style>
        /*
            定位就是找当前其父元素的定位基点
        */
        /*
            默认定位于相对定位的区别
            都是找其父元素的定位基点
            这两个定位都没有脱离文档文档流
            绝对定位会脱离文档流
         相对定位与绝对定位的区别：
            两种定位都基于其父元素
        */
        div{width: 200px;height: 200px}
        #div1{background-color: red;left: 200px;margin: 100px 0 0 100px}
        #div2{position: relative;
                background-color: lightblue;
                left: 200px;
                margin: -100px 0 0 0;

            z-index: -1;
        }
        #div3{
            background-color: aqua;
        }
        #div4{background-color: darkgrey;
            position: fixed;/*固定定位*/
        }

    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>